<template>
  <div class="miheader">
    <div class="contain">
      <div class="tabbar">
        <a v-for="(item, index) of menuItem" :key="index" @click="jump('/')">
          {{ item.name }}
        </a>
      </div>
      <div class="bar2">
        <div v-if="!username" @click="jump('/login')">登录</div>
        <div v-if="username">
          {{ username }}
        </div>
        <div v-if="username" @click="logOut">退出</div>
        <div v-if="username" @click="jump('/order')">订单列表</div>
      </div>
      <div class="shopCar" @click="jump('/cart')">
        <i class="icon"></i>
        购物车({{ cartCount }})
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      menuItem: [
        { name: '小米商城' },
        { name: 'MIUI' },
        { name: 'IoT' },
        { name: '云服务' },
        { name: '天星数科' },
        { name: '有品' },
        { name: '小爱开放平台' },
        { name: '企业团购' },
        { name: '资质证照' },
        { name: '协议规则' },
        { name: '下载app' },
        { name: '智能生活' },
        { name: 'Select Location' },
      ],
      menu2: {
        username: '登录',
        jump: '/login',
      },
      menu3: [
        {
          username: '退出',
          jump: '/login',
        },
        {
          username: '订单列表',
          jump: '',
        },
      ],
    }
  },
  methods: {
    jump(a) {
      this.$router.push({ path: a })
    },
    // 退出登录函数，使用登出接口后改变vuex的username
    async logOut() {
      let res = await this.axios.post('/user/logout')
      this.$store.state.username = ''
    },
  },
  mounted() {},

  computed: {
    headData() {
      if (this.$store.state.username) {
        this.menu2.username = this.$store.state.username
        return this.menu2
      }
      return this.menu2
    },
    xy() {
      if (this.$store.state.username) return true
      return false
    },
    ...mapState(['username', 'cartCount']),
  },
}
</script>

<style lang="scss">
.miheader {
  min-width: 1226px;
  background-color: #333333;
  .contain {
    position: relative;
    height: 40px;
    width: 1226px;
    margin: auto;
    line-height: 40px;
    .tabbar {
      position: absolute;
      left: 0;
      color: #b0b0b0;
      display: flex;
      a {
        display: block;
        &:hover {
          color: #fff;
        }
        &:nth-child(n + 2) {
          &::before {
            content: '|';
            color: #424242;
            margin: 0.3em;
          }
        }
      }
    }
    .bar2 {
      position: absolute;
      right: 120px;
      display: flex;
      color: #b0b0b0;
      margin-right: 15px;
      div {
        &:hover {
          color: #fff;
        }
        &:nth-child(n + 2) {
          &::before {
            content: '|';
            color: #424242;
            margin: 0.3em;
          }
        }
      }
    }
    .shopCar {
      background-color: #ff6700;
      position: absolute;
      right: 0;
      width: 120px;
      line-height: 40px;
      &:hover {
        color: #ff6700;
        background-color: #fff;
        .icon {
          background-image: url(../../public/img/gwc-active.png);
        }
      }
      .icon {
        width: 20px;
        line-height: 20px;
        // &::before {
        // content: '';
        display: inline-block;
        height: 20px;
        vertical-align: -4px;
        width: 20px;
        background-image: url(../../public/img/gwc.png);
        background-size: 100%;
        margin-right: 4px;
        // }
      }
    }
  }
}
</style>
